<script setup lang="ts">
import { reactive, watch, onMounted, ref } from "vue";
import { getCategoryList, addCategory, updateCategory } from "@/api";
import type { Category } from "@/model";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
const props = defineProps(["isShow", "category"]);
const emit = defineEmits(["closeDialog"]);
const menuList = ref<Category[]>([]);
const formObj = reactive({
  name: "",
  level: 1,
  pid: -1,
});
const formRef = ref<FormInstance>();
const rules = reactive({
  name: [{ required: true, message: "分类名称不能为空", trigger: "blur" }],
  pid: [
    {
      validator: (_rule: any, value: any, callback: any) => {
        if (value == "" && formObj.level == 2) {
          callback(new Error("请选择上级分类名称"));
        } else {
          callback();
        }
      },
    },
  ],
});

async function submitForm() {
  await formRef.value?.validate(async (valid, _fields) => {
    if (valid) {
      var res = null;
      if (props.category.id == 0) {
        formObj.pid = formObj.pid == -1 ? 0 : formObj.pid;
        res = await addCategory(formObj);
      } else {
        const data = {
          id: props.category.id,
          name: formObj.name,
          pid: formObj.pid == -1 ? 0 : formObj.pid,
        };
        res = await updateCategory(data);
      }
      if (res.data.errno == 0) {
        emit("closeDialog");
        ElMessage.success(res.data.errmsg);
      } else {
        ElMessage.error(res.data.errmsg);
      }
    }
  });
}

//重置表单
function resetForm() {
  // formObj.name = ""
  // formObj.level = 1
  // formObj.pid = -1
  initForm();
}

//初始化表单数据
function initForm() {
  formObj.name = props.category.name;
  formObj.level = props.category.pid == 0 || props.category.pid == -1 ? 1 : 2;
  formObj.pid =
    props.category.pid == 0 || props.category.pid == -1
      ? -1
      : props.category.pid;
}

//查询所有一级分类
async function loadCategoryList() {
  const res = await getCategoryList();
  menuList.value = res.data.data.filter((item: Category) => item.pid == 0);
}

//监听当前组件属性是否发生变化
watch(props, () => {
  loadCategoryList();
  resetForm();
  initForm();
});

//组件加载完成
onMounted(() => {
  loadCategoryList();
  initForm();
});
</script>

<template>
  <el-form
    ref="formRef"
    :model="formObj"
    :rules="rules"
    label-width="120"
    status-icon
  >
    <el-form-item label="分类名称" prop="name">
      <el-input v-model="formObj.name" style="width: 400px"></el-input>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-radio-group
        v-model="formObj.level"
        :disabled="props.category.id == 0 ? false : true"
      >
        <el-radio :value="2">是</el-radio>
        <el-radio :value="1">否</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="分类级别" v-show="formObj.level == 2" prop="pid">
      <el-select v-model="formObj.pid" style="width: 200px">
        <el-option label="请选择上级分类名称" :value="-1"></el-option>
        <el-option
          v-for="item in menuList"
          :label="item.name"
          :value="item.id"
        ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="">
      <el-button type="primary" @click="submitForm">{{
        props.category.id == 0 ? "新增" : "修改"
      }}</el-button>
      <el-button @click="resetForm">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<style scoped></style>
